<template>
    <div class="tables">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="用户编号" prop="id" />
            <el-table-column label="用户名称" prop="username" />
            <el-table-column label="用户昵称" prop="name" />
            <el-table-column label="部门" prop="type" />
            <el-table-column label="手机号码" prop="tel" />
            <el-table-column label="状态" prop="status">
                <template #default="scope">
                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" />
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="date" />
            <el-table-column align="right">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"
                        plain>修改</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
                        plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 修改弹框 -->
    <el-dialog v-model="dialogVisible" title="修改" width="500">
        <span>
            <Alertform :ruleForm="RemForm" :rules="rules" :formSize="formSize" :submitForm="submitForm"
                :offalert="offalert" />
        </span>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive,onMounted } from 'vue';
import Alertform from '@/components/alertform.vue';
import { updateList, delData, getList } from "@/api/ListApi"
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessageBox ,ElMessage} from 'element-plus'
let y = defineProps(['tableData','render'])


// onMounted(()=>{
//     getListData()
// })
// let tableData:any = reactive([])
const formSize = ref<ComponentSize>('default')
let dialogVisible = ref(false) //修改弹框
let RemForm :any= ref({
    id: '',
    username: '',
    name: '',
    type: '',
    tel: '',
    status: 2,
    date: '',
})//回显数据
//表单验证
interface RuleForm {
    id: any,
    username: string
    name: string
    type: string
    tel: string
    status: number
    date: string
}
const rules = reactive<FormRules<RuleForm>>({
    username: [{ required: true, message: '请输入用户名称', trigger: 'blur' },],
    name: [{ required: true, message: '请输入用户昵称', trigger: 'blur' },],
    type: [{ required: true, message: '请输入部门', trigger: 'blur' },],
    tel: [{ required: true, message: '请输入手机号', trigger: 'blur' },],
})
// let getListData = () => {
//     getList().then((res) => {
//         tableData = res
//     })
// }

//点击修改按钮
let handleEdit = (index: any, row: any) => {
    dialogVisible.value = true
    RemForm.value = {
        id: row.id,
        username: row.username,
        name: row.name,
        type: row.type,
        tel: row.tel,
        status: row.status,
        date: row.date,
    }
}

//点击修改确定按钮
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            updateList(RemForm.value.id, RemForm.value).then((res) => {
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
                dialogVisible.value = false
                y.render()
                RemForm.value = {}
            })
        } else {
            dialogVisible.value = false
            y.render()
            RemForm.value = {}
        }
    })
}
//关闭添加弹框
const offalert = () => {
    dialogVisible.value = false
    RemForm.value = {}
}

let handleDelete = (index: any, row: any) => {
    delData(row.id).then((res) => {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        dialogVisible.value = false
        y.render()
        RemForm.value = {} 
    })
}

</script>
<style lang="scss" scoped></style>
